<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DevTest 应用测试平台 - Login</title>
    <link rel="stylesheet" href="/3rdparty/layui/css/layui.css">
    <style>
        .layui-container {
            text-align: center;
        }

        .layui-card {
            width: 50%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="layui-container" id="app">
    <div class="layui-card">
        <div class="layui-card-header">
            <h2>Moi Kiitos Register</h2>
        </div>
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">Email</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="required" v-model="form.email" autocomplete="off"
                               placeholder="username" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Login Name</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="required" v-model="form.userName" autocomplete="off"
                               placeholder="email" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Password</label>
                    <div class="layui-input-block">
                        <input type="password" name="username" lay-verify="required" v-model="form.password"
                               placeholder="password" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Confirm Password</label>
                    <div class="layui-input-block">
                        <input type="password" name="username" lay-verify="required" v-model="repeatPsd"
                               placeholder="comfirm password" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </form>
        </div>
        <button type="button" @click="registerUser()" class="layui-btn layui-btn-normal">Register</button>
        <a href="/login"><button type="button" id="registerBtn" class="layui-btn layui-btn-primary">Login</button></a>
    </div>
</div>
</body>
<script src="/3rdparty/layui/layui.js"></script>
<script src="/js/jquery-3.4.1.js"></script>
<script src="/js/jquery.cookie.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="/js/status-check.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            form: {
                email: null,
                password: null,
                userName: null
            },
            repeatPsd: null,
            username: $.cookie('userName'),
            userId: $.cookie('userId'),
        },
        mounted() {
        },
        methods: {
            async registerUser() {
                if (!this.form.email) {
                    alert('email is required');
                    return;
                }
                if (!this.form.userName) {
                    alert('userName is required');
                    return;
                }
                if (!this.form.password) {
                    alert('password is required');
                    return;
                } else if (this.form.password !== this.repeatPsd) {
                    alert('passwords are not align!');
                    return;
                }
                let res = await axiosReq('post', "/users/register", this.form);
                if (res) {
                    alert(res.msg);
                    window.location.href="/login"
                }
            }
        }
    })
</script>
</html>